<template>
  <div class="question-container">
    <div class="container">
      <div class="row row-div">
        <div class="col-sm" :class="butIndex === 1? 'pitchOn': ''">
          <router-link to="/MainPage/Question/Page1">
            <button @click="butChange(1)">题型</button>
          </router-link>
        </div>
        <div class="col-sm" :class="butIndex === 2? 'pitchOn': ''">
          <router-link to="/MainPage/Question/Page2">
            <button @click="butChange(2)">题库</button>
          </router-link>
        </div>
        <div class="col-sm" :class="butIndex === 3? 'pitchOn': ''">
          <router-link to="/MainPage/Question/Page3">
            <button @click="butChange(3)">大纲</button>
          </router-link>
        </div>
      </div>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
import Page1 from '@/view/mainPage/left/Page1.vue'
import Page2 from '@/view/mainPage/left/Page2.vue'
import Page3 from '@/view/mainPage/left/Page3.vue'

export default {
  name: 'QuestionTypes',
  components: {
    Page1,
    Page2,
    Page3
  },
  data () {
    return {
      butIndex: 1
    }
  },
  methods: {
    butChange (index) {
      this.butIndex = index
    }
  }
}
</script>

<style lang="less" scoped>
.question-container {
  padding: 10px;

  .container {
    .row-div {
      height: 32px;
      padding: 2px;
      line-height: 26px;
      text-align: center;
      color: #808080;
      background-color: #e8e8e8;

      button {
        background: none;
        border: none;
      }

      .pitchOn {
        color: black;
        background-color: white;
      }
    }
  }
}
</style>
